<template>
  <view class="content">
    <!-- 搜索框 -->
    <view class="search">
      <view class="searchInput" @click="show = true">
        <u-icon name="search" color="#909399" :size="26"></u-icon>
        <u-input
          type="text"
          clearable
          border="0"
          @input="inputKey"
          :value="tabname"
          class="inputTxt"
          placeholder="请输入搜索关键词"
        ></u-input>
      </view>
      <u-transition :show="show">
        <view class="button" @click="setSearch">
          <text>搜索</text>
        </view>
      </u-transition>
    </view>
    <view class="history">
      <text>搜索推荐</text>
    </view>
    <good-list :list="goods"></good-list>
    <!-- 添加没有找到商品的提示 -->
    <view v-if="!hasGoods && goods.length === 0" class="no-results">
      <text>没有找到相关商品</text>
    </view>
  </view>
</template>

<script>
import { apiGoods } from '../../api/mock'
import { mapActions,mapState } from 'vuex'
	export default {
		data() {
			return {
				show:false,
				hasGoods: false, // 初始化状态为没有找到商品
				goods:[],
				p : 1,		//当前页码
				num : 6,	//每页条数
				tabname : '',
			}
		},
		onLoad() {
			//当页面加载完成后，请求各类数据
			setTimeout(()=>{
				this.getGoods();
			},1)
		},
		methods: {
			//搜索
			...mapActions('search', ['actionHistory', 'delHistory']),
			btn(e){
				this.inputKey(e)
				this.actionHistory(e)
			},
			getSearch(){
				this.show = true;
			},
			inputKey(e){
				console.log(e);
				this.tabname = e;
				this.getGoods();
			},
			// 商品列表数据
			getGoods(e){
				let msg =this.tabname;
				if(this.tabname.trim()==''){
					msg = '全部';
				}
				this.status='loadmore';
				this.p =1;
				this.goods =[];
				this.hasGoods = false;  // 初始化状态为没有找到商品
				apiGoods(this.p,this.num,msg).then((res)=>{
					console.log(res);
					this.goods = res;
					if(this.goods.length == res.total){
						this.status = 'nomore';
					}
				}).catch((err)=>{
					console.log(err);
				})
			},
		}
	}
</script>

<style lang="scss">
/* 搜索框样式 */
.search{
	padding: 8px 20px;
	display: flex;
	align-items: center;
	.searchInput{
		width: 98%;
		background-color: rgb(234, 234, 234);
		border-radius: 20px;
		display: flex;
		align-items: center;
		padding: 0 8px;
		.inputTxt{
			width: 100%;
			height: 24px;
			border-radius: 20px;
			font-size: 15px;
			color: $u-tips-color;
			margin-left: 4px;
		}
	}
	.button{
		font-size: 14px;
		margin-left: 8px;
	}
}
.history{
	width: 96%;
	margin: 18px auto;
	font-size: 14px;
	
	.del{
		display: flex;
		align-items: center;
		justify-content: center;
		text{
			margin-left: 2px;
			font-size: 13px;
			color: #848484;
		}
	}
}
.no-results {
        width: 96%;
        margin: 20px auto;
        text-align: center;
        font-size: 14px;
        color: #848484;
    }
</style>
